<template>
  <el-row :gutter="15">
    <el-col
      v-for="(ctrId, index) in colOrder"
      :key="'form_' + ctrId + '_' + index"
      :span="formColSpan[ctrId]"
      v-show="showCol[ctrId]"
    >
      <transition name="el-zoom-in-top">
        <el-form-item
          :rules="ruleMeta[ctrId] ?? []"
          :prop="childMetaList[ctrId].colName"
          :label="childMetaList[ctrId].label"
          :label-width="childMetaList[ctrId].labelWidth??''"
          v-show="showCol[ctrId]"
        >
          <component
            :is="formItemKey[childMetaList[ctrId].controlType]"
            :model="model"
            :meta="childMetaList[ctrId]"
            v-bind="childPropsList[ctrId]"
          >
          </component>
        </el-form-item>
      </transition>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" generic="T extends object">
  import type { IFormItemMeta } from '../map'

  // 获取状态
  import { getFormState } from '../map'

  // 引入表单子控件
  import { formItemKey } from '../form-item/_map-form-item'

  defineOptions({
    name: 'nf-el-from-item-base',
    inheritAttrs: false,
  })
  
  const props = defineProps<IFormItemMeta>()

  // const slots = defineSlots()
  // const slotsKey = Object.keys(slots)
  // console.log('nf-el-from-item-base - props', props)

  const state = getFormState<T>()

  const {
    model,
    ruleMeta,
    formColSpan,
    showCol,
    childPropsList, // input 的 props
    childMetaList, // 字段的纯 meta
  } = state
  
  // console.log('nf-el-from-item-base - childPropsList', childPropsList)
 
 
</script>